<template>
  <div class="listBox">
    <teleport to=".header">
      <shopHeader center="search" />
    </teleport>

    <div class="listBox">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        class="list-box"
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <div class="item-list" >
        <ul>
          <li @click="$router.push({path:'/detail',query: {proid: item.proid}})" class="list" v-for="item in list" :key="item.proid">
            <img :src="item.img1">
            <div class="right">
              <p class="title">{{ item.proname }}</p>
              <p class="price">￥{{ item.originprice }}</p>
              <p class="cate">{{ item.category }}</p>
            </div>
          </li>
        </ul>
       
      </div>
      </van-list>
    </van-pull-refresh>
  </div>
  </div>
</template>
<script setup lang="ts" name="list">
import shopHeader from "../../components/header.vue"
import { getSearchLish } from '../../request/search'
import { ref } from 'vue'
import { useRoute, useRouter } from "vue-router";
const $route = useRoute()
const $router = useRouter()

// 处于加载状态
const loading = ref(false)

// 加载完成
const finished = ref(false)
const refreshing = ref(false)
const keyword = ref($route.query.keyword as string)

const pagenum = ref<number>(1)
  interface GoodsData {
  img1?: string,
  proid?: string,
  proname: string,
  originprice?: number,
  discount?: number,
  [key: string]: any
}

interface Reponse {
  code?: string,
  data?: Array<GoodsData>
}

const list = ref<Array<GoodsData>>([])
const onLoad = () => {
  setTimeout(async () => {

    const res = await getSearchLish(keyword.value)
    if ((res as Reponse).code !== '200') return
    
    list.value.push(...res.data)
 
    if(res.data.length < 10)  finished.value = true
    pagenum.value++
    loading.value = false
    refreshing.value = false
  }, 1000)
}
// 刷新
const onRefresh = () => {
  pagenum.value = Math.floor(Math.random() * 5) +1
  list.value = []
  finished.value = false
  loading.value = true
  onLoad()
}
</script>
<style scoped lang="scss">
.list{
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
  img{
    width: 110px;
    height: 110px;
    margin-right: 10px;
  }
  .right{
    .title{
      color: #333;
      word-wrap: break-all;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      height: 40px;
      margin-bottom: 10px;
    }
    .price{
      color: #ff0000;
      font-size: 20px;
    }
    .cate{
      float: right;
      background-color: #f2f2f2;
      padding-left: 10px;
      padding-right: 10px;
      height: 25px;
      line-height: 25px;
    }
  }
}
</style>
